<!DOCTYPE html>
<html>
    <head>
        <title>Host</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script>
            htconfig = {
                Default:{                     
                    toolTipDelay: 300
                }
            };            
        </script>
        <script src="../../../../lib/core/ht.js"></script>   
        <script>    
            
            ht.Default.setImage('port', 32, 32, '');
                        
            function init(){                                                                                                                            
                dataModel = new ht.DataModel();
                g3d = new ht.graph3d.Graph3dView(dataModel);                  
                view = g3d.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    g3d.invalidate();
                }, false);   
                
                g3d.setEye([0, 300, 600]);
                g3d.enableToolTip();
                g3d.getToolTip = function(e){
                    var data = this.getDataAt(e);
                    if(data){
                        return '<pre>' + JSON.stringify(data.getStyleMap(), null, 4) + '</pre>';
                    }
                    return null;
                };                
                g3d.getMoveMode = function(e){
                    return 'xyz';
                };
                g3d.getBrightness = function(data){                   
                    if(data.s('isFocused')){
                        return 0.7;
                    }
                    return null;
                };
                lastFocusData = null;
                g3d.getView().addEventListener('mousemove', function(e){
                    var data = g3d.getDataAt(e);
                    if(data !== lastFocusData){
                        if(lastFocusData){
                            lastFocusData.s('isFocused', false);
                        }
                        if(data){
                            data.s('isFocused', true);
                        }
                        lastFocusData = data;
                    }
                }); 
                
     
                floor = createNode([0, 0, 0], [600, 5, 400]).s({
                    'all.color': '#A0A0A0',
                    'label': 'This is a floor',
                    'label.face': 'top',
                    'label.background': 'yellow',
                    'label.position': 22,
                    'label.t3': [10, 0, -10],
                    'label.font': '28px arial, sans-serif'
                });                
                table = createNode([0, 120, 0], [400, 10, 280], floor).s({
                    'shape3d': 'cylinder',
                    'shape3d.side': 60,
                    'shape3d.color': '#E5BB77',
                    'label': 'This is a table',
                    'label.face': 'top',
                    'label.background': 'yellow',
                    'label.position': 23,
                    'label.t3': [0, 0, -10],
                    'label.font': '20px arial, sans-serif'                    
                });                
                foot1 = createNode([100, 60, 80], [20, 110, 20], table).s({
                    'shape3d': 'cylinder',
                    'shape3d.color': '#E5BB77',
                    'label': 'Foot 1 hosting on table',                    
                    'label.background': 'yellow', 
                    'label.position': 20
                });   
                foot2 = createNode([-100, 60, 80], [20, 110, 20], table).s({
                    'shape3d': 'cylinder',
                    'shape3d.color': '#E5BB77',
                    'label': 'Foot 2 hosting on table',                    
                    'label.background': 'yellow', 
                    'label.position': 14                    
                }); 
                foot3 = createNode([100, 60, -80], [20, 110, 20], table).s({
                    'shape3d': 'cylinder',
                    'shape3d.color': '#E5BB77',
                    'label': 'Foot 3 hosting on table',                    
                    'label.background': 'yellow', 
                    'label.position': 25,
                    'label.reverse.flip': true
                }); 
                foot4 = createNode([-100, 60, -80], [20, 110, 20], table).s({
                    'shape3d': 'cylinder',
                    'shape3d.color': '#E5BB77',
                    'label': 'Foot 4 hosting on table',                    
                    'label.background': 'yellow', 
                    'label.position': 21,
                    'label.reverse.flip': true
                });
                chassis = createNode([0, 150, 0], [100, 50, 60], table).s({
                    'all.color': '#2e2f32',
                    'front.color': '#BDC3C7',
                    'back.uv.scale': [2, 1],
                    'note': 'This is a chassis with two panels and 8 ports',
                    'note.face': 'top',
                    'note.position': 7,
                    'note.t3': [0, 0, 10],
                    'note.autorotate': true
                });
                panel1 = createNode([0, 162, 30], [90, 20, 2], chassis).s({
                    'note': 'Panel 1',
                    'note.r3': [0, -Math.PI/4, 0]
                }); 
                for(var i=0; i<4; i++){
                    var port = createNode([-30+i*20, 162, 31], [16, 12, 2], panel1).s({
                        'all.color': '#303030',  
                        'front.image': 'port'
                    });
                    if(i === 0){
                        port.s({
                           'all.blend': 'red',
                           'note': 'Critical Alarm',
                           'note.position': 1,
                           'note.t3': [0, 0, 5],
                           'note.r3': [Math.PI/10, 0, 0],
                           'note.background': 'red'
                        });
                    }
                }
                panel2 = createNode([0, 138, 30], [90, 20, 2], chassis).s({
                    'note': 'Panel 2',
                    'note.r3': [Math.PI/7, Math.PI/6, 0]
                }); 
                for(var i=0; i<4; i++){
                    createNode([-30+i*20, 138, 31], [16, 12, 2], panel2).s({
                        'all.color': '#303030',  
                        'front.image': 'port'
                    });
                }                
            } 
            
            function createNode(p3, s3, host){
                var node = new ht.Node();
                node.p3(p3);
                node.s3(s3);
                node.setHost(host);
                node.s({
                    'wf.visible': 'selected',
                    'wf.color': '#FF6B10',
                    'wf.width': 2,
                    'wf.short': true                    
                });
                dataModel.add(node);
                return node;
            }
                        
          
        </script>
    </head>
    <body onload="init();">                  
              
    </body>
</html>